<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            width: 500px;
            list-style: none;
        }

        ul li {
            text-align: center;
            border: 1px solid #000;
            height: 40px;
            line-height: 40px;
        }
    </style>
</head>

<body>
    <div id="app">
        <ul>
            <li>欢迎光临_vue开发的收银系统_水果店</li>
            <li>
                <span style="font-weight: bold;">苹果 10 ￥/斤,折扣< 8折></span>
            </li>
            <li>
                <span>请输入你要购买的斤数</span>
                <input type="number" v-model.number="weight" @keyup.enter="pay">
            </li>
            <li>
                <button @click="pay">结账买单~</button>
            </li>
            <li>
                <span>结账单: 总价: {{total}}元 折后价: <span style="font-weight: bold;">{{ discount }}</span>元
                    省了:{{discountMoney}}元</span>
            </li>
        </ul>
    </div>

    <script src="../vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                price: 10,
                zhekou: .8,
                weight: 0,
                total: 0,
                discount: 0,
                discountMoney: 0
            },
            methods: {
                pay() {
                    this.total = this.weight * this.price
                    this.discount = this.weight * this.price * this.zhekou
                    this.discountMoney = this.total - this.discount
                }
            }
        })
    </script>
</body>

</html>